<template>
  <el-row>
    <el-card class="box-card" :body-style="{ padding: '0px' }">
        <el-row class="title"><h4>常用联系人</h4></el-row>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="defaultName" label="默认联系人" width="300"></el-table-column>
            <el-table-column prop="name" label="联系人姓名" width="180"></el-table-column>
            <el-table-column prop="phone" label="联系人电话"> </el-table-column>
            <el-table-column prop="address" label="联系人地址"> </el-table-column>
            <el-table-column label="操作"> 
                <template slot-scope="scope">
                    <el-button  type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small"  @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row class="bottom-box">
            <el-row>
                <el-col :span="11" >
                    姓名*
                    <el-input></el-input>
                </el-col>
                <el-col :span="11" :offset="2">
                    电话*
                    <el-input></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" >
                    地址*
                    <el-input></el-input>
                </el-col>
            </el-row>
            <el-row class="commit-box">
                <el-col>
                    <el-button class="commit-btn" type="primary"><i class="el-icon-edit"></i> 保存联系人</el-button>
                </el-col>
            </el-row>
        </el-row>
    </el-card>
  </el-row>
</template>

<script>
export default {
    data(){
        return {
            tableData:[
                {
                    "defaultName":'无',
                    "name":'明明白白的小明',
                    "phone":'12312341234',
                    "address":'广东省广州市从化区',
                }
            ]
        }
    },
    methods:{
      deleteRow(index, rows) {
        rows.splice(index, 1);
      }
    },

}
</script>

<style scoped>
.box-card {
    margin-top: 50px;
    width: 100%;
}
.title{
    background: #ddd;
}
h4{
    padding-left: 10px;
    margin: 0;
    height: 40px;
    line-height: 40px;
}
.bottom-box{
    padding: 0px 10px;
}
.commit-box{
    margin-top: 10px;
}
.commit-btn{
    float: right;
}
</style>